<template>
	<view class="container">
		<!-- 内容区域包装器 -->
		<view class="content-wrapper">
			<!-- 搜索区域 -->
			<view class="search-box">
				<u-search placeholder="请输入关键搜索" v-model="fromData.kw" :show-action="false" :clearabled="true"
					:animation="false" shape="round" bgColor="#FFF" height="72rpx" searchIconColor="#999999"
					placeholderColor="#999999" @change="changekeword" :inputStyle="{
						color: '#333333',
						backgroundColor: '#FFF',
					}"></u-search>
				<view class="add-btn" @click="handleToAdd">
					<u-icon name="plus-circle" size="40rpx" color="#FE4F04"></u-icon>
				</view>
			</view>
		</view>

		<view class="setting-list" v-if="list.length>0">
			<view class="setting-item" v-for="item in list" :key="item.id" @click="handleToDetail(item)">
				<view class="setting-item-label">
					<span>{{item.name}}</span>
					<span class="label">{{types[item.type]}}</span>
				</view>
				<view style="color: #FE4F04;" class="setting-item-value" @click.stop="handleDelete(item)">
					删除
				</view>
			</view>
		</view>

		<view class="total">
			共 {{list.length}} 项
		</view>
	</view>
</template>

<script>
	import {
		getHxList,
		hx_del
	} from '@/api/part2.js'
	export default {
		data() {
			return {
				pageType: '', // 页面类型 list 列表 select选择
				timerId: null,
				fromData: {
					kw: ''
				},
				types: {
					'1': '整租',
					'2': '合租'
				},
				list: []
			}
		},
		onLoad(options) {
			if (options && options.pageType) {
				this.pageType = options.pageType
			}
		},
		onShow() {
			this.getHxList()
		},
		methods: {
			handleDelete(e){
				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确定删除户型：' + e.name + '吗？',
					showCancel: true,
					success: ({ confirm, cancel }) => {
						if (confirm) {
							//点击确定
							console.log('用户点击确定')
							hx_del({
								id: e.id
							}).then(res=>{
								console.log(res)
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								this.getHxList()
							})
						} else if (cancel) {
							//点击取消
							console.log('用户点击取消')
						}
					}
				})
			},
			changekeword() {
				if (this.timerId) {
					clearTimeout(this.timerId)
				}
				this.timerId = setTimeout(() => {
					this.getHxList()
				}, 200)
			},
			getHxList() {
				getHxList(this.fromData).then(res => {
					console.log('户型：', res.data.data)
					this.list = res.data.data
				})
			},
			handleToAdd() {
				uni.navigateTo({
					url: '/pages-landlord/settings/houseDetail'
				})
			},
			handleToDetail(item) {
				if (this.pageType === 'select') {
					uni.$emit('selectHouseType', item)
					uni.navigateBack()
					return
				} else {
					uni.navigateTo({
						url: '/pages-landlord/settings/houseDetail?data=' + JSON.stringify(item)
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	view,
	span {
		box-sizing: border-box;
	}

	.container {
		padding: 12rpx 32rpx;
		background: #F5F6FA;
	}

	.search-box {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 24rpx;
	}

	.setting-list {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx;
		padding: 18rpx 40rpx;

		.setting-item {
			padding: 16rpx 0;
			font-size: 28rpx;
			color: #666666;
			display: flex;
			justify-content: space-between;

			.setting-item-label {
				display: flex;
				align-items: center;
				gap: 20rpx;
			}

			.label {
				background: rgba(129, 179, 54, 0.08);
				border-radius: 6rpx;
				border: 1rpx solid #81B336;
				font-size: 22rpx;
				color: #81B336;
				line-height: 32rpx;
				padding: 0 14rpx;
			}
		}
	}

	.total {
		padding: 24rpx 40rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 34rpx;
	}
</style>